<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '添加银行卡',
  },
}
</route>
<template>
  <div class="form-page">
    <wd-form custom-class="custom-form" ref="form" :model="model">
      <wd-cell title="姓名" title-width="250rpx">
        <wd-input
          prop="value1"
          clearable
          v-model="model.value1"
          placeholder="请输入你的真实姓名"
          :rules="[{ required: true, message: '请输入你的真实姓名' }]"
          suffix-icon="edit-1"
        />
      </wd-cell>

      <wd-cell title="身份证号" title-width="250rpx">
        <wd-input
          prop="value1"
          clearable
          v-model="model.value1"
          placeholder="请输入你的身份证号"
          :rules="[{ required: true, message: '请输入身份证号' }]"
          suffix-icon="edit-1"
        />
      </wd-cell>

      <wd-cell title="银行卡号" title-width="250rpx">
        <wd-input
          prop="value1"
          clearable
          v-model="model.value1"
          placeholder="请输入银行卡号"
          :rules="[{ required: true, message: '请输入银行卡号' }]"
          suffix-icon="edit-1"
        />
      </wd-cell>

      <wd-cell title="卡类型" title-width="250rpx">
        <wd-picker
          :columns="columns"
          v-model="model.value3"
          prop="value3"
          :rules="[{ required: true, message: '请选择卡类型' }]"
          @confirm="handleConfirm"
          custom-class="card-type"
        />
      </wd-cell>

      <wd-cell title="银行预留手机号" title-width="250rpx">
        <wd-input
          prop="value1"
          clearable
          v-model="model.value1"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
          suffix-icon="edit-1"
        />
      </wd-cell>

      <wd-cell title="验证码" title-width="250rpx">
        <wd-input v-model="model.code" placeholder="请输入验证码" use-suffix-slot>
          <template #suffix>
            <div class="code active" @click="sendCode(true)">
              {{ second > 0 ? `${second}s后再试` : '获取验证码' }}
            </div>
          </template>
        </wd-input>
      </wd-cell>
    </wd-form>

    <div class="btn-box">
      <button class="submit active" @click="handleSubmit()" :loading="loading">确定添加</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { redirect } from '@/utils/page'
import { useUserStore } from '@/store/index'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const model = reactive({
  value1: '',
  value2: '',
  value3: '',
  code: '',
})

const form = ref()
const loading = ref(false)
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])

function handleConfirm({ value }) {
  model.value3 = value
}
function handleSubmit() {
  redirect('/pages-sub/system/bank/success')
  // form.value
  //   .validate()
  //   .then(({ valid, errors }) => {
  //     if (valid) {
  //       loading.value = true
  //     }
  //   })
  //   .catch((error) => {
  //     console.log(error, 'error')
  //   })
}

const second = ref(0)
function sendCode(click = false) {
  if (click && second.value > 0) {
    return
  }
  if (second.value === 0) {
    second.value = 60
    setTimeout(sendCode, 1000)
  } else {
    second.value--
    if (second.value > 0) {
      setTimeout(sendCode, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.form-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: 152rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 152rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 152rpx) !important;
  background-color: var(--bgc4);

  .code {
    padding: 8rpx 10rpx;
    font-size: 23rpx;
    color: var(--color1);
    border: 1rpx solid var(--color1);
    border-radius: 10rpx;
  }

  .btn-box {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20rpx 30rpx;
    padding-bottom: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
    background-color: #fff;
    box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    .submit {
      box-sizing: border-box;
      width: 100%;
      height: 92rpx;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 88rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color1);
      border-radius: 46rpx;
      box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    }
  }

  .card-type {
    --wot-cell-wrapper-padding: 10px 0 10px 10px;
  }
}
</style>
